@charset "utf-8";
@import 'reset';
@import 'common';

.web {
    main {
        margin:45px auto 0;
        width:900px;
        .position {
            position:relative;
            width:100%;
            height:32px;
            line-height: 30px;
            text-indent: 5px;
            box-sizing: border-box;
            background-color: #6db6ff;
            border-top:1px solid #6db6ff;
            &::before {
                content:"";
                display: block;
                position:absolute;
                top:-1px;
                left:65px;
                // transform: translateX(-50%);
                z-index: 2;
                width: 830px;
                height: 0px;
                border-width: 1px 0px 32px 15px;
                border-style: solid;
                border-color: #6db6ff #6db6ff #fff #6db6ff;
            }
            p {
                position:absolute;
                z-index: 3;
                span {
                    font-size: 16px;
                    color:#fff;
                }
            }
        }
        .copany-content {
            %top-line {
                position: relative;
                height:38px;
                padding-top:5px;
                // line-height: 38px;
                font-weight:bold;
                text-align:center;
                box-sizing: border-box;
                &::after {
                    content:"";
                    display: block;
                    position:absolute;
                    top:-1px;
                    left:0px;
                    z-index: -1;
                    width:720px;
                    height: 0px;
                    border-width: 1px 15px 38px 17px;
                    border-style: solid;
                    border-color: #6db6ff #6db6ff #fff #6db6ff;
                }
            }
            %bottom-line {
                position: relative;
                height:38px;
                // line-height: 38px;
                font-weight:bold;
                text-align:center;
                box-sizing: border-box;
                &::after {
                    content:"";
                    display: block;
                    position:absolute;
                    top:-1px;
                    left:0px;
                    z-index: -1;
                    width:720px;
                    height: 0px;
                    border-width: 38px 15px 1px 17px;
                    border-style: solid;
                    border-color: #fff #6db6ff #6db6ff #6db6ff;
                }
            }
            margin:0 auto;
            width:751px;
            // border:1px solid;
            h3 {
                position:relative;
                margin:48px 0 0px;
                text-align: center;
                font-weight: bolder;
                .chinese-name {
                    font-family: MicrosoftYaHei;
                    font-size:18px;
                }
                .english-name {
                    font-family: Arial-BoldMT;
                    font-size: 10px;
                }
                &::after {
                    content:'';
                    display: block;
                    position:absolute;
                    left:50%;
                    transform:translateX(-50%);
                    bottom:-9px;
                    width:157px;
                    height:0px;
                    border:1px solid #6db6ff;
                }
            }

            .company-profile {
                margin-top:50px;
                h5 {
                    @extend %top-line;
                    // position: relative;
                    // height:38px;
                    // padding-top:5px;
                    // // line-height: 38px;
                    // font-weight:bold;
                    // text-align:center;
                    // box-sizing: border-box;
                    // &::after {
                    //     content:"";
                    //     display: block;
                    //     position:absolute;
                    //     top:-1px;
                    //     left:0px;
                    //     z-index: -1;
                    //     width:720px;
                    //     height: 0px;
                    //     border-width: 1px 15px 38px 17px;
                    //     border-style: solid;
                    //     border-color: #6db6ff #6db6ff #fff #6db6ff;
                    // }
                    span {
                        font-size:9px;
                    }
                }
                p {
                    span {
                        display: block;
                        &.company-name {
                            width:100%;
                            text-align:center;
                            font-size:14px;
                            line-height:45px;
                        }
                        &.introduction {
                            width:100%;
                            font-size:12px;
                            text-indent: 24px;
                            text-align: justify;
                            line-height:23px;
                        }
                    }
                }
                div.profile-banner {
                    position:relative;
                    width:751px;
                    height:458px;
                    .banner-img {
                        position:absolute;
                        left:0px;
                        top:0px;
                        width:100%;
                        height:100%;
                    }
                    .logo {
                        position:absolute;
                        left:50%;
                        transform:translateX(-50%);
                        bottom:50px;
                    }
                }
            }
            .company-vision {
                margin-top:24px;
                h5 {
                    @extend %bottom-line;
                    // position: relative;
                    // height:38px;
                    // padding-top:5px;
                    // // line-height: 38px;
                    // font-weight:bold;
                    // text-align:center;
                    // box-sizing: border-box;
                    // &::after {
                    //     content:"";
                    //     display: block;
                    //     position:absolute;
                    //     top:-1px;
                    //     left:0px;
                    //     z-index: -1;
                    //     width:720px;
                    //     height: 0px;
                    //     border-width: 1px 15px 38px 17px;
                    //     border-style: solid;
                    //     border-color: #6db6ff #6db6ff #fff #6db6ff;
                    // }
                }
                p {
                    margin-top:10px;
                    font-size:12px;
                    line-height:23px;
                }
                img {
                    width:752px;
                    height:424px;
                }
            }
            .company-mission {
                margin-top:28px;
                h5 {
                    @extend %top-line;
                    // height:38px;
                    // font-weight:bold;
                    // text-align:center;
                    span {
                        font-size:9px;
                    }
                }
                p {
                    span {
                        display: block;
                        &.mission-aim {
                            width:100%;
                            text-align:center;
                            font-size:14px;
                            line-height:35px;
                        }
                        &.mission {
                            width:100%;
                            font-size:12px;
                            text-indent: 24px;
                            text-align: justify;
                            line-height:23px;
                        }
                    }
                }
                img {
                    margin-top:13px;
                    width:751px;
                    height:512px;
                }
            }
            .company-team {
                margin-top:23px;
                h5 {
                    @extend %bottom-line;
                    // height:38px;
                    // font-weight:bold;
                    // text-align:center;
                    span {
                        font-size:9px;
                    }
                }
                p {
                    margin-top:15px;
                    font-size:12px;
                    line-height:23px;
                }
                img {
                    margin-top:20px;
                    width:751px;
                    height:503px;
                }
            }
            .company-culture {
                margin-top:31px;
                h5 {
                    @extend %top-line;
                    // height:38px;
                    // font-weight:bold;
                    // text-align:center;
                    span {
                        font-size:9px;
                    }
                }
                .culture-content {
                    ul {
                        margin-top:10px;
                        li {
                            text-align: center;
                            font-size: 14px;
                            line-height: 16px;
                        }
                    }
                    span {
                        font-size: 12px;
                        line-height: 32px;
                    }
                    
                }
                img {
                    margin-top:5px;
                    width:753px;
                    height:459px;
                }
            }

            .core-values {
                margin-top:21px;
                h5 {
                    @extend %bottom-line;
                    // height:38px;
                    // font-weight:bold;
                    // text-align:center;
                    span {
                        font-size:9px;
                    }
                }
                ul {
                    margin-top:12px;
                    li {
                        margin:0 auto;
                        width:345px;
                        font-size: 14px;
                        line-height: 16px;
                    }
                }
                img {
                    margin-top:16px;
                    width:752px;
                    height:463px;
                }
            }

            .turning-page {
                ul {
                    display: flex;
                    justify-content: center;
                    li {
                        margin:21px 15px;
                        a {
                            text-decoration:none;
                            font-size: 12px;
                            color:#444;
                        }
                    }
                }
            }
        }
    }
}